<template>
  <h1>Index 组件</h1>
  <button @click="add">新增元素</button>
  <hr />

  <Suspense timeout="0">
    <div :key="delayList.length">
      <RectColor v-for="item in delayList" :delay="item" />
    </div>

    <template #fallback>
      <span>loading...</span>
    </template>
  </Suspense>
</template>

<script setup>
import RectColor from './RectColor.vue'
import { ref } from 'vue'

const delayList = ref([3000, 1000, 2000])

const add = () => {
  delayList.value.push(Math.floor(Math.random() * 3001 + 1000))
}
</script>

<style scoped></style>
